<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>添加门店</title>
    {$h->import('static/css/layui.css')}
    {$h->import('static/css/HyqPublic.css')}
    <style type="text/css">
        body{
            width: 695px;
            height: 678px;
            margin: 0;
            color: rgba(0,0,0,.65);
            font-size: 14px;
        }
        /*弹窗页面 公共部分 start*/
        
        /*弹窗页面 公共部分 start*/

        /*---------------主要内容区域----------------*/
        .AddStore_address_container{
            display: flex;
            flex-direction: column;
            flex: 1;
        }
        .AddStore_addressHeader_container p{
            color: #1990ff;
            font-size: 14px;
            margin-right: 10px;
        }
        .AddStore_addressHeader_container{
            display: flex;
            align-items: center;
        }
        .AddStore_address_content{
            display: flex;
            align-items: center;
            cursor: pointer;
        }
        .AddStore_address_content svg{
            margin-right: 5px;
        }
        .AddStore_address_content span{
            font-size: 13px;
            color: #1990ff;
        }
        .AddStore_addressMain_container{
            /*width: 551px;*/
            height: 267px;
            background: #eee;
            margin-top: 8px;
        }
        .AddStore_addressMain_TipsText{
            margin-top: 10px;
            font-size: 13px;
            font-weight: 400;
            color: rgba(0,0,0,.45);
            line-height: 18px;
        }
    </style>
</head>
<body>
<div class="public_Pop_container">
    <h3 class="public_PopTitle">新增门店信息</h3>
    <div class="public_PopTips_container">
        <svg t="1622540008125" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4204" width="14" height="14"><path d="M595.138 889.173c16.52 0 29.914 13.393 29.914 29.913 0 16.521-13.393 29.914-29.914 29.914H436.563c-16.52 0-29.914-13.393-29.914-29.914 0-16.52 13.393-29.913 29.914-29.913h158.575z m-494.224-66.73C84.393 822.442 71 809.05 71 792.528s13.393-29.914 29.914-29.914h98.828V474.698c0-165.138 126.17-300.806 287.37-315.869l0.001-58.942C487.113 83.38 500.494 70 517 70s29.887 13.38 29.887 29.887l0.001 58.942c161.2 15.063 287.37 150.731 287.37 315.869l-0.001 287.917h98.83c16.52 0 29.913 13.393 29.913 29.914 0 16.52-13.393 29.913-29.914 29.913H100.914z" fill="#1990ff" p-id="4205"></path></svg>
        <p>配置过程较为复杂，可<a href="#">联系客服</a>提供人工配置服务</p>
    </div>
    <div class="public_PopMain_container layui-form">
        <div class="public_form_conainer public_select_container">
            <span class="public_formTitle public_formTitleImportant">拉群活码：</span>
            <div class="public_select_content">
                <select name="contact_id" lay-verify="required" required>
                    <option></option>
                    {loop $contactWay as $group}
                    <option value="{$group['id']}"{if $stores->contact_id == $group['id']}selected{/if} >{$group["name"]}</option>
                    {/loop}
                </select>
            </div>
        </div>
        <div class="public_form_conainer public_search_container">
            <span class="public_formTitle public_formTitleImportant">门店名称：</span>
            <div class="public_search_content">
                <input type="text" placeholder="请输入门店名称" value="{$stores->stores_name}" name="stores_name" required  lay-verify="required">
            </div>
        </div>
        <div class="public_form_conainer public_search_container" style="display: flex; align-items: flex-start; margin-right: 0;">
            <span class="public_formTitle public_formTitleImportant">地图坐标：</span>
            <div class="public_search_content" >
                <input type="text" name="lng" id="lng" placeholder="经度" value="{$stores->lng}" readonly autocomplete="off" class="layui-input" required  lay-verify="required">
                <input type="hidden" name="stores_city" id="stores_city">
            </div>
            <div class="layui-form-mid">&nbsp;-</div>
            <div class="public_search_content" >
                <input type="text" name="lat" id="lat" placeholder="维度" value="{$stores->lat}" readonly autocomplete="off" class="layui-input" required  lay-verify="required">
            </div>
        </div>
        <div class="public_form_conainer" style="display: flex; align-items: flex-start; margin-right: 0;">
            <span class="public_formTitle public_formTitleImportant">门店地址：</span>
            <div class="AddStore_address_container">
                <div class="layui-form-item selectAddress" >
                    <div class="layui-input-inline">
                        <input type="text" id="address" value="{$stores->stores_address}"  name="stores_address" value="" autocomplete="off" class="layui-input" data-rule-maxlength ="140"style="width: 200%" required  lay-verify="required"/>
                    </div>
                    <div class="layui-form-mid layui-word-aux"><a href="javascript:;" style="color: blue;margin-left: 111px;" onclick="codeAddress()">搜索坐标</a></div><br>
                </div>
                <div class="" id="container" style="max-width:500px;min-height:300px;"></div>
                <p class="AddStore_addressMain_TipsText">提示：请根据xx省xx市xx区地图选取门店地址，定位会更加精准哦～</p>
            </div>
        </div>
        <div class="public_form_conainer public_switch_container">
            <span class="public_formTitle public_formTitleImportant">开启状态：</span>
            <div class="public_switch_content">
                <input type="checkbox" name="status" lay-skin="switch" {if $stores->status == 1}checked{/if}>
            </div>
        </div>
        <div class="public_formSubmit_conainer">
            <!-- <button class="layui-btn layui-btn-normal" onclick="add_stores()" lay-filter="formDemo">创建</button> -->
             <button class="layui-btn" lay-submit lay-filter="formDemo">创建</button>

        </div>
    </div>
</div>
<script src="/cdn/jquery.min.js"></script>
<script src="/layui/layui.all.js"></script>
<script src="/js/ajax.js"></script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=MLGBZ-2TG32-6KOUF-CIOJ6-BENLJ-Z5BHQ"></script>
<script>

//表单
layui.use('form', function(){
    var form = layui.form;

  //监听提交
  form.on('submit(formDemo)', function(data){
    myAjaxPost(false, true, '', data.field, function (resp) {
        layer.msg(resp.msg);
        if(resp.status == "success"){
            setTimeout(function(){
                parent.location.reload();
            },1000);
        }
    })
  });

});

</script>

<script type="text/javascript">
var check=0;
inits();
function codeAddress() {
    check=0;
    var address = document.getElementById("address").value;
    
    //通过getLocation();方法获取位置信息值
    geocoder.getLocation(address);
}
function inits() {
    var map = new qq.maps.Map(document.getElementById("container"),{
        center: new qq.maps.LatLng({if $stores->lat}{$stores->lat}{else}39.916527{/if},{if $stores->lng}{$stores->lng}{else}116.397128{/if}),
        // center: new qq.maps.LatLng(39.916527,116.397128),//线上正式使用 换成上面的写法（依据实际数据去填此除只是默认值）
        zoom: 13
    });
    citylocation = new qq.maps.CityService({
        complete : function(results){
           /* map.setCenter(results.detail.latLng);
            city.style.display = 'inline';
            city.innerHTML = '所在位置: ' + results.detail.name;*/
            console.log(results);
        }
    });
    geocoder = new qq.maps.Geocoder({
        complete : function(result){
            console.log(result);
            $("#lat").val(result.detail.location.lat);
            $("#lng").val(result.detail.location.lng);
            $("#address").val(result.detail.address);
            $("#stores_city").val(result.detail.addressComponents.city);
            map.setCenter(result.detail.location);
            if(check==0){
                var str=result.detail.location+"";
                var lengh=str.indexOf(",");
                var lat=str.substring(0,lengh);
                var lng=str.substring(lengh+2);
            }
        
            var marker = new qq.maps.Marker({
                map:map,
                position: result.detail.location
            });
            qq.maps.event.addListener(map, 'click', function(event) {
            marker.setMap(null);      
            }); 
        }
    });
    //添加监听事件   获取鼠标单击事件
    qq.maps.event.addListener(map, 'click', function(event) {
        check=1;
        $("#lat").val(event.latLng.lat);
        $("#lng").val(event.latLng.lng);
         
        geocoder.getAddress(event.latLng);
        citylocation.searchCityByLatLng(event.latLng);

        var marker=new qq.maps.Marker({
            position:event.latLng, 
            map:map
        });    
        qq.maps.event.addListener(map, 'click', function(event) {
             marker.setMap(null);      
        });
    });
}
</script>
</body>
</html>